<template>
  <div class="box">
    <!-- 右上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="工作面周期来压"
      style="height: 435px"
    >
      <!-- 工作面周期来压 -->
      <div slot="content" class="MainCoal-box-content">
        <HerinSelect
          v-model="brackeType"
          class="herin-select"
          :options="offerOption"
          place-holder=""
          :height="34"
          :width="330"
          :showOptionscount="4"
          @HerinSelectChange="brackeTChange"
          style="
            background-color: rgba(255, 255, 255, 0.05);
            margin-bottom: 10px;
          "
        />
        <div class="chartBroken">
          <div class="charttitle">上次周期来压监测</div>
          <div class="line" />
          <div />
        </div>
        <div class="chartDash">
          <div style="height: 81px; width: 110px">
            <Dashboard :fontData="fontDataL" scaleColor="#00E0F1" />
            <p>来压步距</p>
          </div>
          <div style="height: 81px; width: 110px">
            <Dashboard :fontData="fontDataR" scaleColor="#00E0F1" />
            <p>来压推进</p>
          </div>
        </div>
        <div class="sensorSum">
          <p class="sum">最高压力</p>
          <p>
            <span class="num" style="color: rgba(255, 209, 1, 100)">12</span
            ><span class="piece">MPa</span>
          </p>
        </div>
        <div class="sensorSum">
          <p class="sum">所在支架</p>
          <p>
            <span class="num" style="color: #e09640">98#</span
            ><span class="piece">架</span>
          </p>
        </div>
        <div class="chartBroken">
          <div class="charttitle">周期来压记录</div>
          <div class="line" />
          <div />
        </div>
        <div class="cycleHead">
          <p style="width: 64px">次数</p>
          <p style="width: 103px">日期时间</p>
          <p style="width: 78px">推进<span class="cycle">(m)</span></p>
          <p style="width: 80px">步距<span class="cycle">(m)</span></p>
        </div>
        <div style="height: 64px; overflow: auto">
          <div
            class="cycleCont"
            v-for="(v, cycleList) in cycleList"
            :key="cycleList"
          >
            <div style="width: 65px">
              <p :style="activation(cycleList)">{{ v.num }}</p>
            </div>
            <div style="width: 105px">
              <p :style="activation(cycleList)">{{ v.item }}</p>
            </div>
            <div style="width: 80px">
              <p :style="activation(cycleList)">{{ v.go }}</p>
            </div>
            <div style="width: 80px">
              <p :style="activation(cycleList)">{{ v.day }}</p>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
    <!-- 右中box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="近七天微震监测"
      style="height: 263px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, ind) in titleTwotab"
          :key="ind"
          :class="['btn', isTwobtn === item ? 'isbtn' : '']"
          @click="clickTwoTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 近七天微震监测 统计 -->
      <div :slot="Twocount" class="MainCoal-box-content">
        <div style="height: 204px">
          <div class="Megatron">
            <p class="sum">微震次数</p>
            <p>
              <span class="num" style="color: rgba(0, 253, 255, 100)">{{
                microseismTotal | dataFormat
              }}</span
              ><span class="piece">次</span>
            </p>
          </div>
          <div class="outage">
            <StackBarChart
              :data="microseismChart"
              :color="['#5087EC', '#68BBC4', '#58A55C']"
              unit="次"
            />
          </div>
        </div>
      </div>
      <!-- 近七天微震监测  列表 -->
      <div :slot="Twolist" class="MainCoal-box-content">
        <div class="time-wrap">
          <div class="date-picker-warp">
            <DatePicker
              v-model="selectDate"
              class="date-picker"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="datePickerOptions"
              @change="timeFun"
              style="background-color: rgba(255, 255, 255, 0.05)"
            />
          </div>
          <div class="input-box">
            <input v-model="timeInput" type="text" placeholder="搜索..." />
            <i
              v-show="timeInput"
              class="el-icon el-icon-close"
              @click="timeClear"
            />
            <i class="el-icon el-icon-search" @click="timeSearchFun" />
          </div>
        </div>
        <div class="cycleHead">
          <p style="width: 101px">日期时间</p>
          <p style="width: 78px">能量<span class="cycle">(焦耳)</span></p>
          <p style="width: 68px">能量等级</p>
          <p style="width: 70px">位置</p>
        </div>
        <div style="height: 140px; overflow: auto">
          <div
            class="cycleCont"
            v-for="(v, Megatron) in Megatron"
            :key="Megatron"
          >
            <div style="width: 103px">
              <p :style="activation(Megatron)">{{ v.occurrenceTime }}</p>
            </div>
            <div style="width: 80px">
              <p :style="activation(Megatron)">{{ v.centreEnergy }}</p>
            </div>
            <div style="width: 70px">
              <p :style="activation(Megatron)">{{ v.centreLevel }}</p>
            </div>
            <div style="width: 70px">
              <p :style="activation(Megatron)">
                {{ v.locationDesc.replace("工作面", "") }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
    <!-- 右下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="传感器告警监测"
      style="height: 262px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, i) in titletab"
          :key="i"
          :class="['btn', isbtn === item ? 'isbtn' : '']"
          @click="clickTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 传感器告警监测 告警分析 -->
      <div :slot="count" class="MainCoal-box-content" style="height: 200px">
        <div class="broken">
          <div>
            <span class="title">今日告警</span>
            <span
              ><span class="num">{{ warningToday }}</span
              ><span class="piece">次</span></span
            >
          </div>
          <div>
            <span class="title">累计告警</span>
            <span
              ><span class="num">{{ cumulativeAlarm }}</span
              ><span class="piece">次</span></span
            >
          </div>
        </div>
        <div class="chart">
          今日告警类型统计
          <div>
            <span
              :class="chartType ? 'chartColor' : ''"
              @click="chartFun('今日')"
              >今日</span
            >
            <span
              :class="chartType ? '' : 'chartColor'"
              @click="chartFun('近7天')"
              >近7天</span
            >
          </div>
        </div>
        <div class="sensorSort" v-if="chartType === true">
          <div class="chat">
            <RoseChart :data="cateLists" :color="color" />
          </div>
          <div class="right">
            <div v-for="(v, cateLists) in cateLists" :key="cateLists">
              <p class="title">
                <span
                  class="square"
                  :style="`backgroundColor: ${v.color};`"
                ></span
                >{{ v.x }}
              </p>
              <p class="chatnum">{{ v.y }}<span class="piece">次</span></p>
            </div>
          </div>
        </div>
        <div class="sensorLine" v-else-if="chartType === false">
          <LineChart
            :chartData="lists"
            :text="['告警']"
            :area="true"
            unit="次"
            :color="['#32C1F7']"
          />
        </div>
      </div>
      <!-- 传感器告警信息  告警记录列表 -->
      <div :slot="list" class="MainCoal-box-content" style="height: 233px">
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="outageOption"
            place-holder=""
            :height="28"
            :width="160"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input v-model="searchInput" type="text" placeholder="搜索..." />
            <i
              v-show="searchInput"
              class="el-icon el-icon-close"
              @click="clearInput"
            />
            <i class="el-icon el-icon-search" @click="handleSearch" />
          </div>
        </div>
        <div
          class="alertList"
          style="height: 160px; overflow: auto; padding-right: 10px"
          v-infinite-scroll="load"
          infinite-scroll-immediate="false"
          infinite-scroll-disabled="noMore"
        >
          <div
            class="alert"
            v-for="(v, alertList) in alertList"
            :key="alertList"
          >
            <div class="cont">
              <p class="title" v-showTips>{{ v.monitorAreaName || "-" }}</p>
              <span
                class="cont-state"
                :style="{ color: setAlarmType(v.alarmType).color, backgroundColor: setAlarmType(v.alarmType).color + '33' }"
                >{{ setAlarmType(v.alarmType).text }}</span
              >
            </div>
            <div class="state">
              <span class="stateImg">
                <img src="@/assets/img/monitor/icon-6.png" alt="" />
                <span v-showTips>{{ v.stationNo }}</span>
              </span>
              <span>{{ v.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import LineChart from '@/components/chart/line/LineChart.vue';
import DatePicker from './datepicker/DatePicker.vue';
import Dashboard from '@/views/monitor/char/Dashboard.vue';
import StackBarChart from '@/components/chart/bar/StackBarChart.vue';
import {
  getMicroseismicData7,
  getMicroseismPageVo,
  getWarnCount,
  getWarnInfo,
  getWarnChart,
  getWarnJL
} from '@/api/item/monitor/mine.js';
import { DataView } from '@antv/data-set';

export default {
  components: {
    HerinContainer,
    HerinSelect,
    LineChart,
    RoseChart,
    DatePicker,
    Dashboard,
    StackBarChart
  },
  mounted() {
    this.getMicroseismicData7();
    this.getMicroseismPageVo();
    this.getWarnCount();
    this.getWarnInfo();
    this.getWarnChart();
    this.getWarnJL();
  },
  data() {
    return {
      fontDataL: {
        fontY: '85%',
        content: '26m',
        fill: '#E1E3E6',
        fontSize: 16
      },
      fontDataR: {
        fontY: '85%',
        content: '25mm',
        fill: '#E1E3E6',
        fontSize: 16
      },
      brackeType: '全部区域',
      offerOption: [
        {
          label: '全部区域',
          value: '全部区域'
        },
        {
          label: '40204工作面',
          value: '40204工作面'
        },
        {
          label: '41109工作面',
          value: '41109工作面'
        }
      ],
      selectDate: '',
      timeInput: '',
      datePickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      lists: [],
      chartType: true,
      alertList: [],
      selectType: '全部告警',
      searchInput: '',
      outageOption: [
        {
          label: '全部告警',
          value: '全部告警'
        },
        {
          label: '锚索应力',
          value: '锚索应力'
        },
        {
          label: '锚杆应力',
          value: '锚杆应力'
        },
        {
          label: '钻孔应力',
          value: '钻孔应力'
        },
        {
          label: '支架阻力',
          value: '支架阻力'
        },
        {
          label: '顶板离层',
          value: '顶板离层'
        }
      ],
      // 告警记录分页
      // 页码
      curPage: 1,
      // 请求列表数量
      queryNumber: 0,

      // 微震图表数据
      microseismChart: [],
      // 微震列表
      Megatron: [],
      cycleList: [
        {
          num: '第一天',
          item: '2022-06-21 02:00:00',
          go: '60',
          day: '5'
        },
        {
          num: '第二天',
          item: '2022-06-21 02:00:00',
          go: '60',
          day: '5'
        },
        {
          num: '第三天',
          item: '2022-06-21 02:00:00',
          go: '60',
          day: '5'
        },
        {
          num: '第四天',
          item: '2022-06-21 02:00:00',
          go: '60',
          day: '5'
        },
        {
          num: '第五天',
          item: '2022-06-21 02:00:00',
          go: '60',
          day: '5'
        }
      ],

      // 今日告警数量
      warningToday: 0,
      // 累计告警数量
      cumulativeAlarm: 0,

      cateLists: [
        { x: '锚索应力', y: 0, color: '#FFD101' },
        { x: '锚杆应力', y: 0, color: '#FB9B2A' },
        { x: '钻孔应力', y: 0, color: '#00fdff' },
        { x: '支架阻力', y: 0, color: '#34c8ff' },
        { x: '顶板离层', y: 0, color: '#86ebff' }
      ],
      color: ['#FFD101', '#FB9B2A', '#00fdff', '#34c8ff', '#86ebff'],
      count: 'content',
      list: '',
      titletab: ['告警分析', '告警记录'],
      isbtn: '告警分析',
      Twocount: 'content',
      Twolist: '',
      titleTwotab: ['统计', '列表'],
      isTwobtn: '统计'
    };
  },
  computed: {
    activation() {
      return (icontent) => {
        if (icontent % 2 === 0) {
          return {
            color: 'rgba(0, 253, 255, 100)'
          };
        }
      };
    },
    // 微震次数总数
    microseismTotal() {
      return this.microseismChart.reduce((total, item) => {
        return total + item.y;
      }, 0);
    },
    noMore() {
      return this.queryNumber < 50;
    }
  },
  methods: {
    // 获取近七天微震统计数据
    async getMicroseismicData7() {
      const res = await getMicroseismicData7();
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        const dv = new DataView().source(data).transform({
          type: 'fold',
          fields: ['low', 'centre', 'high'],
          key: 's',
          value: 'y'
        });
        const snum = { low: '0~0.5', centre: '0.5~1', high: '1~1.5' };
        this.microseismChart = new DataView().source(dv.rows).transform({
          type: 'map',
          callback(row) {
            row.x = row.date;
            row.y = Number(row.y);
            row.s = snum[row.s];
            return row;
          }
        }).rows;
      }
    },
    // 获取近七天微震列表
    async getMicroseismPageVo() {
      const res = await getMicroseismPageVo({
        date: this.selectDate,
        term: this.timeInput
      });
      if (res.status === 200 && res.data.success) {
        this.Megatron = res.data.data;
      }
    },
    // 获取传感器告警监测 告警数量
    async getWarnCount() {
      const res = await getWarnCount();
      if (res.status === 200 && res.data.success) {
        const { warningToday, cumulativeAlarm } = res.data.data;
        this.warningToday = warningToday;
        this.cumulativeAlarm = cumulativeAlarm;
      }
    },
    // 获取传感器告警监测 今日告警图表
    async getWarnInfo() {
      const res = await getWarnInfo();
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        const arr = [
          '锚索应力',
          '锚杆应力',
          '钻孔应力',
          '支架阻力',
          '顶板离层'
        ];
        const sortData = data.sort((a, b) => {
          return arr.indexOf(a.type) - arr.indexOf(b.type);
        });
        this.cateLists.forEach((item, idx) => {
          item.y = Number(sortData[idx].count);
          this.$set(this.cateLists, idx, item);
        });
      }
    },
    // 获取传感器告警监测 近七天告警趋势
    async getWarnChart() {
      const res = await getWarnChart();
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.lists = data.map((item) => {
          return { x: item.x, y: Number(item.y), s: item.s };
        });
      }
    },
    // 获取传感器告警监测 告警记录
    async getWarnJL() {
      const params = {
        condition: this.searchInput,
        current: this.curPage,
        size: 50,
        warnType: this.selectType === '全部告警' ? '' : this.selectType
      };
      const res = await getWarnJL(params);
      if (res.status === 200 && res.data.success) {
        const { records } = res.data.data;
        this.alertList = [...this.alertList, ...records];
        this.queryNumber = records.length;
      }
    },
    // 页面下拉加载
    load() {
      this.curPage += 1;
      this.getWarnJL();
    },
    // 告警记录 设置类型文字颜色
    setAlarmType(state) {
      const defaultType = { text: '默认', color: '#ffffff' };
      switch (state) {
        case '锚索应力':
          defaultType.text = '锚索';
          defaultType.color = this.color[0];
          break;
        case '锚杆应力':
          defaultType.text = '锚杆';
          defaultType.color = this.color[1];
          break;
        case '钻孔应力':
          defaultType.text = '钻孔';
          defaultType.color = this.color[2];
          break;
        case '支架阻力':
          defaultType.text = '支架';
          defaultType.color = this.color[3];
          break;
        case '顶板离层':
          defaultType.text = '顶板';
          defaultType.color = this.color[4];
          break;
      }
      return defaultType;
    },
    // 获取工作面周期来压数据
    getOffice() {
      const params = {
        time: this.brackeType
      };
      console.log(params);
    },
    brackeTChange() {
      this.getOffice();
    },
    // 获取近7天威震监测时间选择器
    timeFun() {
      console.log(this.selectDate);
      this.getMicroseismPageVo();
    },
    // 获取近7天威震监测搜索
    timeSearchFun() {
      this.getMicroseismPageVo();
    },
    // 清除近7天威震监测搜索框
    timeClear() {
      this.timeInput = '';
      this.getMicroseismPageVo();
    },
    // 获取传感器告警检测类型统计数据
    alertData(params) {
      console.log(params);
    },
    // 点击传感器告警检测今日  近7天
    chartFun(name) {
      if (name === '今日') {
        this.chartType = true;
        const params = {
          name: name
        };
        this.alertData(params);
      } else if (name === '近7天') {
        this.chartType = false;
        const params = {
          name: name
        };
        this.alertData(params);
      }
    },
    initState() {
      this.alertList = [];
      this.curPage = 1;
      this.getWarnJL();
    },
    // 点击传感器告警下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.initState();
    },
    // 点击传感器告警搜索按钮
    handleSearch() {
      this.initState();
    },
    // 点击传感器告警清除搜索框
    clearInput() {
      this.searchInput = '';
      this.initState();
    },
    // 点击传感器调校监测tab  右中
    clickTwoTitleTab(item) {
      this.isTwobtn = item;
      if (item === '列表') {
        this.Twolist = 'content';
        this.Twocount = '';
      } else if (item === '统计') {
        this.Twolist = '';
        this.Twocount = 'content';
      }
    },
    // 点击传感器告警信息tab  右下
    clickTitleTab(item) {
      this.isbtn = item;
      if (item === '告警记录') {
        this.list = 'content';
        this.count = '';
      } else if (item === '告警分析') {
        this.list = '';
        this.count = 'content';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .cycle {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    display: inline;
  }
  .chartDash {
    display: flex;
    justify-content: space-between;
    padding: 0 1.1875rem;
    height: 105px;
    p {
      text-align: center;
      color: rgba(173, 173, 173, 100);
      font-size: 12px;
      height: 14px;
    }
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.125rem;
    margin-bottom: 0.625rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .Megatron {
    display: flex;
    width: 20.625rem;
    justify-content: space-between;
    color: rgba(16, 16, 16, 100);
    margin-bottom: 10px;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 16px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .chart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(173, 173, 173, 100);
    margin: 0.625rem 0;
    font-size: 12px;
    span {
      display: inline-block;
      height: 1rem;
      padding: 0 0.3125rem;
    }
  }
  .chartColor {
    background-color: rgba(46, 214, 230, 0.2);
    color: #2ed6e6;
  }
  .cycleHead {
    display: flex;
    p {
      background-color: rgba(0, 0, 0, 0.4);
      color: rgba(232, 232, 232, 100);
      font-size: 12px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0.1);
      line-height: 1.25rem;
    }
  }
  .cycleCont {
    display: flex;
    div {
      background-color: rgba(0, 0, 0, 0.4);
      height: 2.125rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      p {
        font-size: 12px;
        width: 100%;
        color: rgba(232, 232, 232, 100);
        text-align: center;
      }
    }
  }
  .outageList {
    .cont {
      justify-content: space-between;
      display: flex;
      p {
        align-items: center;
        display: flex;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0;
      }
    }
    .state {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(173, 173, 173, 100);
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .chartBroken {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
    .charttitle {
      font-size: 0.75rem;
      color: $light2Grey;
      margin: 0;
    }
    .line {
      flex: 1;
      height: 0.0625rem;
      border-bottom: 0.0625rem dashed $darkGrey;
    }
  }
  .sensorSort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8.0625rem;
    .chat {
      width: 8.25rem;
      height: 8.0625rem;
    }
    .right {
      width: 10rem;
      height: 8.0625rem;
      display: flex;
      flex-wrap: wrap;
      .square {
        display: inline-block;
        width: 0.375rem;
        height: 0.375rem;
        margin-right: 5px;
      }
      div {
        width: 50%;
        .title {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
        }
        .chatnum {
          color: rgba(248, 248, 248, 100);
          font-size: 14px;
        }
      }
    }
  }
  .sensorLine {
    height: 8.0625rem;
  }
  .outage {
    height: 10.9375rem;
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .input-box {
      width: 10rem;
      height: 1.75rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
  .alertList {
    width: calc(100% + 10px);
    padding-right: 10px;
    .alert:last-child {
      margin-bottom: 0;
    }
    .alert {
      border-bottom: 0.0625rem solid rgba(173, 173, 173, 100);
      margin-bottom: 0.625rem;
      .cont {
        justify-content: space-between;
        display: flex;
        align-items: center;
        .title {
          width: 15rem;
          color: rgba(248, 248, 248, 100);
          font-size: 14px;
        }
        &-state {
          font-size: 0.75rem;
          line-height: 1rem;
          padding: 0 0.3125rem;
          border-radius: .125rem;
        }
      }
      .state {
        display: flex;
        justify-content: space-between;
        margin: 0.625rem 0;
        font-size: 12px;
        color: rgba(173, 173, 173, 100);
        .stateImg {
          display: flex;
          align-items: center;
          span {
            width: 11.25rem;
            margin-left: 0.3125rem;
          }
        }
        img {
          width: 0.8rem;
          height: 0.8rem;
        }
      }
    }
  }
  .time-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
    .date-picker-warp {
      width: 10rem;
      height: 1.875rem;
    }
    .input-box {
      width: 10rem;
      height: 1.875rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.5rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
